<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Three Branch Force Directed Graph</h1>
    <div id="container"></div>

    <script src="../engine/dist/ElGrapho.js"></script>
    <script>

let model = {
  nodes: [
    {group: 0, label: 'a0'},
    {group: 1, label: 'a1'},
    {group: 1, label: 'a2'},
    {group: 1, label: 'a3'},
    {group: 1, label: 'a4'},
    {group: 1, label: 'a5'},
    {group: 2, label: 'a6'},
    {group: 2, label: 'a7'},
    {group: 2, label: 'a8'},
    {group: 2, label: 'a9'},
    {group: 2, label: 'a10'},
    {group: 3, label: 'a11'},
    {group: 3, label: 'a12'},
    {group: 3, label: 'a13'},
    {group: 3, label: 'a14'},
    {group: 3, label: 'a15'}
  ],
  edges: [
    {from: 0,  to: 1},
    {from: 1,  to: 2},
    {from: 2,  to: 3},
    {from: 3,  to: 4},
    {from: 4,  to: 5},
    {from: 0,  to: 6},
    {from: 6,  to: 7},
    {from: 7,  to: 8},
    {from: 8,  to: 9},
    {from: 9,  to: 10},
    {from: 0,  to: 11},
    {from: 11, to: 12},
    {from: 12, to: 13},
    {from: 13, to: 14},
    {from: 14, to: 15},
  ]
};

let graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.ForceDirected(model),
  width: 500,
  height: 500,
  debug: true
});
    </script>



  </body>
</html>